<template>
  <div class="maincc">
    <div class="main_spac1" style="padding-bottom: 5px">
      <div class="main_white padding10">
        <div class="main_crumbs boxdq">
          <div class="main_crumbs_l">
            <a href="javascript:;" @click="$router.back(-1)">
              <i class="el-icon-arrow-down"></i>返回
            </a>
            <em>|</em>
            <span>云图库</span>
          </div>
        </div>
        <div class="mainor_form marginTop15">
          <el-form
            :inline="true"
            :model="form"
            class="demo-form-inline"
            ref="userListFrom"
            label-width="75px"
          >
            <el-form-item label="商品名称" prop="name">
              <el-input
                v-model.trim="form.name"
                placeholder="商品名称"
                clearable
                class="wid220"
              ></el-input>
            </el-form-item>
            <el-form-item label="分类" prop="category_id" class="wid220">
              <el-select
                v-model.trim="form.category_id"
                placeholder="分类"
                class="wid220"
              >
                <el-option label="所有" value=""></el-option>
                <el-option
                  v-for="(cate, index) in list.cate"
                  :key="index"
                  :label="cate"
                  :value="index"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="marginTop0">
              <el-button
                class="reset marginLeft10"
                type="primary"
                @click="$refs['userListFrom'].resetFields()"
                >重置</el-button
              >
              <el-button
                type="primary"
                @click="getArticleList"
                :loading="listLoading"
                >搜索</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <div class="main_table" style="min-height: 620px">
          <el-table
            ref="multipleTable"
            v-loading="listLoading"
            :data="list.list.data"
            element-loading-text="加载中"
            fit
            highlight-current-row
             :header-cell-class-name="this.$verticaline"
          >
            <el-table-column
              label="商品名称"
              prop="name"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="商品图片"
              :show-overflow-tooltip="true"
              class-name="main_hei"
            >
              <template slot-scope="scope">
                <div class="image_gd">
                  <!-- <img :src="puzzleImg" v-if="scope.row.images.length==0" class="demo_eer" /> -->
                  <ul class="box">
                    <li
                      class="demo-image"
                      v-for="(images, index) in scope.row.images"
                      :key="index"
                    >
                      <label
                        class="el-upload-list__item-status-label"
                        v-if="images.main == 1"
                      >
                        <i class="el-icon-upload-success el-icon-check"></i>
                      </label>
                      <el-image
                        fit="fill"
                        :src="images.url"
                        :preview-src-list="scope.row.album"
                      >
                        <div slot="error" class="image-slot">
                          <img :src="puzzleImg" />
                        </div>
                      </el-image>
                    </li>
                  </ul>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              fixed="right"
              width="300"
              class-name="main_hei"
            >
              <template slot-scope="scope">
                <el-link
                  type="success"
                  @click="(addedFormVisible = true), edit_assig(scope.$index)"
                  >匹配</el-link
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="main_page boxdq">
          <div></div>
          <!-- 分页 -->
          <div class="main_page_r">
            <el-pagination
              :current-page="current.page"
              :page-sizes="[20, 30, 50, 100]"
              :page-size="limit"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalCount"
              background
              @size-change="changeLimit"
              @current-change="changePage"
            />
          </div>
        </div>
        <el-dialog
          title="匹配商品"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
          @close="close"
          :visible.sync="addedFormVisible"
          class="main_dialog dialog600"
        >
          <el-form
            :inline="false"
            :model="info"
            :rules="rules"
            class="demo-form-inline"
            ref="userListFrom"
            label-width="120px"
          >
            <el-form-item label="商品名称：" prop="name">
              <el-autocomplete
                v-model="info.name"
                :trigger-on-focus="true"
                ref="searchSelect"
                @clear="$refs.searchSelect.$children[0].blur()"
                class="wid300 main_comm"
                :fetch-suggestions="
                  (queryString, cb) => {
                    querySearchAsync(queryString, cb);
                  }
                "
                placeholder="商品名称"
                clearable
                :highlight-first-item="true"
                value-key="name"
                @select="
                  (item) => {
                    handleSelect(item);
                  }
                "
              ></el-autocomplete>
            </el-form-item>
            <el-form-item label="商品图片：" prop="pics">
              <div class="main_uqr">
                <div class="main_uqr_u">
                  <ul class="boxha">
                    <li v-for="(pics, index) in info.pics" :key="index">
                      <label
                        class="el-upload-list__item-status-label"
                        v-if="pics.main == 1"
                      >
                        <i class="el-icon-upload-success el-icon-check"></i>
                      </label>
                      <el-image
                        fit="fill"
                        :src="pics.url"
                        :preview-src-list="album"
                      >
                        <div slot="error" class="image-slot">
                          <img :src="puzzleImg" />
                        </div>
                      </el-image>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="clearfix"></div>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="(addedFormVisible = false), close()"
              >取 消</el-button
            >
            <el-button type="primary" @click="setupmine" v-repeatClick
              >确 定</el-button
            >
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { gallery_index, images_add } from "@/api/commodity/commodity_Cloud";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import rules from "@/rules/commodity/commodity_Cloud";
import { uploadPath, puzzleImg, goods_getGoods } from "@/api/currency";

export default {
  computed: {
    ...mapGetters(["avatar"]),
  },
  components: {},
  data() {
    return {
      // 新增
      info: {
        is_export: 1,
        id: "",
        name: "",
        pics: [],
      },
      album: [],
      addedFormVisible: false,
      // 分页
      current: {
        page: 1,
        per_page: 20,
      },
      limit: 20,
      totalCount: 1,
      // 搜索
      form: {
        name: "",
        category_id: null,
      },
      // 列表数据
      list: {
        list: {
          data: [],
        },
      },
      puzzleImg,
      listLoading: false,
      // 验证
      rules,
    };
  },
  created() {
    // 列表
    this.gallery_index();
  },
  methods: {
    // 关闭清空表单
    close() {
      this.info = {
        name: "",
        id: "",
        pics: [],
      };
      this.filelist = [];
      this.album = [];
      this.$refs["userListFrom"].clearValidate();
    },
    // 商品搜索
    querySearchAsync(queryString, cb) {
      if (queryString) {
        let data = Object.assign(
          {
            sign: Md5(
              objKeySort(
                Object.assign(apiUrl().name, { name: queryString.trim() })
              ) + apiUrl().appsecret
            ),
          },
          apiUrl().name,
          { name: queryString.trim() }
        );
        goods_getGoods(data).then((res) => {
          if (res.errcode == 0) {
            var results = res.data.goods;
            this.$refs.searchSelect.activated = true;
            cb(results);
          } else {
            this.$message.error(res.errmsg);
            cb([]);
          }
        });
      }
    },
    // 商品选择
    handleSelect(item) {
      this.info.id = item.id;
    },
    // 编辑赋值
    edit_assig(index) {
      let images = JSON.parse(
        JSON.stringify(this.list.list.data[index].images)
      );
      this.album = images.map((e) => e.url);
      this.info = {
        pics: images,
      };
    },
    // 确认
    setupmine() {
      this.$refs["userListFrom"].validate((valid) => {
        if (valid) {
          let info = JSON.parse(JSON.stringify(this.info));
          info.pics = JSON.stringify(info.pics.map((p) => p.path));
          let { name, ...personUnknowName } = info;
          let data = Object.assign(
            {
              sign: Md5(
                objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
              ),
            },
            apiUrl().name,
            personUnknowName
          );
          images_add(data).then((res) => {
            this.addedFormVisible = false;
            if (res.errcode == 0) {
              this.$message({
                message: "匹配成功",
                type: "success",
              });
              this.gallery_index();
            } else {
              this.$message.error(res.errmsg);
            }
          });
        }
      });
    },
    // 分页
    changeLimit(pageSize) {
      this.current.per_page = pageSize;
      this.gallery_index();
    },
    changePage(page) {
      this.current.page = page;
      this.gallery_index();
    },
    // 搜索
    getArticleList() {
      this.current.page = 1;
      this.gallery_index();
    },
    // 列表
    gallery_index() {
      this.listLoading = true;
      let form = JSON.parse(JSON.stringify(this.form));
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, form, this.current)) +
              apiUrl().appsecret
          ),
        },
        apiUrl().name,
        form,
        this.current
      );
      gallery_index(data).then((res) => {
        this.listLoading = false;
        if (res.errcode == 0) {
          res.data.list.data.forEach((e) => {
            let arry = [];
            if (e.path_one) {
              arry.push({
                path: e.path_one,
                url: this.avatar.domain + "/" + e.path_one,
              });
            }
            if (e.path_two) {
              arry.push({
                path: e.path_two,
                url: this.avatar.domain + "/" + e.path_two,
              });
            }
            if (e.path_three) {
              arry.push({
                path: e.path_three,
                url: this.avatar.domain + "/" + e.path_three,
              });
            }
            e.images = arry;
            e.album = e.images.map((p) => p.url);
          });
          this.list = res.data;
          this.totalCount = res.data.list.total;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";

.maincc {
  .mainor_form form {
    width: calc(100% - 200px);
  }
  .main_uqr .main_uqr_u ul li:first-child {
    margin-left: 0;
  }
  .mainor_te {
    .svg-icon {
      width: 1em;
      height: 1em;
    }
  }
  .main_table {
    .image_gd {
      height: 120px;
    }
    .demo-image {
      position: relative;
      margin-left: 20px;
      border: 1px solid #f8f8f9;
      width: 120px;
      overflow: hidden;
      .el-upload-list__item-status-label {
        position: absolute;
        right: -15px;
        top: -6px;
        z-index: 91;
        width: 40px;
        height: 24px;
        background: #13ce66;
        text-align: center;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        -webkit-box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
        box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
        display: block;
        i {
          font-size: 12px;
          margin-top: 11px;
          color: $white;
          -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
        }
      }
      .image_po {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 92;
        width: 100%;
        height: 100%;
        padding-left: 15px;
        border-radius: 4px;
        padding-right: 15px;
        background: $subMenuHover;
      }
      .svg-icon {
        font-size: $font_16;
        color: $white;
        &:hover {
          cursor: pointer;
        }
      }
      &:first-child {
        margin-left: 0;
      }
      /deep/.el-image__inner {
        width: 120px;
        height: 120px;
      }
      img {
        width: 120px;
        height: 120px;
      }
    }
  }
  .maincc_list {
    ul {
      margin-left: -15px;
      li {
        margin-bottom: 15px;
        width: 11.1%;
        .maincc_list_b {
          margin-left: 15px;
          height: 200px;
          background: $white;
          box-shadow: 0px 0px 8px 1px #413f3f14;
          border-radius: 2px;
          position: relative;
        }
        p {
          position: absolute;
          bottom: 0;
          height: 35px;
          line-height: 35px;
          background: $menuActiveText;
          font-size: $font_14;
          color: $white;
          padding-left: 10px;
          padding-right: 10px;
          overflow: hidden;
          width: 100%;
        }
        &:hover {
          cursor: pointer;
        }
      }
    }
  }
  .demo_eer {
    width: 120px;
    height: 120px;
    border: 1px solid #f8f8f9;
  }
  @media screen and (max-width: 1600px) {
    .maincc_list ul li {
      width: 14.28%;
    }
  }
  @media screen and (max-width: 1300px) {
    .maincc_list ul li {
      width: 20%;
    }
  }
  @media screen and (max-width: 800px) {
    .maincc_list ul li {
      width: 33.33%;
    }
  }
}
</style>
